<!-- 网关总数 -->
<template>
    <div class="roomDetail">
        <div class="selectValue">
            <label class="value"> {{ currentNodeName }}</label>
            <div class="rightValue">
                <span class="cursor" @click="currentClick('设备数')"> 设备数：<b>203台</b> </span>
                <span class="cursor" @click="currentClick('在线')">
                    <label class="green"> </label>
                    在线：<b>150台</b>
                </span>
                <span class="cursor" @click="currentClick('离线')">
                    <label class="gray"> </label>
                    离线：<b>40台</b>
                </span>
                <span class="cursor" @click="currentClick('告警')">
                    <label class="red"> </label>
                    告警：<b>5台</b>
                </span>
                <span class="cursor" @click="currentClick('欠费')">
                    <label class="orange"> </label>
                    欠费：<b>5台</b>
                </span>
            </div>
        </div>
        <div class="gjw-list">
            <div v-if="listData.length == 0" class="noData">暂无数据</div>
            <div v-else>
                <div class="gjw-list-list" :style="{height: getHeight()}">
                    <div class="gjw-list-item">
                        <div class="item" v-for="(item, index) in listData" v-bind:key="index" @click="gotoDetail(item)">
                            <div class="item-header" :class="item.type == 1 ? 'db' : 'sb'">
                                <img :src="getImg(item.type)" />
                                <label>{{ item.name }}</label>
                                <div class="rightItemList">
                                    <span class="status" :class="getHeaderClass(item.level)"></span>
                                    <span class="qf" v-if="item.isQf">
                                        <img src="@/assets/images/monitor/qf.png" />
                                    </span>
                                    <span
                                        class="warn"
                                        v-if="item.level > 0"
                                        :style="{
                                            marginRight: item.isQf ? '-10px' : 0
                                        }"
                                    >
                                        <img :src="getLevelImg(item.level)" />
                                    </span>
                                </div>
                            </div>
                            <div class="item-bottom" :class="getBottomClass(item.type, item.level)">
                                <div class="countValue">
                                    <label>{{ item.type == 1 ? '总用电量' : item.type == 2 ? '总用水量' : 'IP地址' }}</label>
                                    <span
                                        >{{ item.type == 3 ? item.ip : item.countValue }}
                                        {{ item.type == 1 ? 'kWh' : item.type == 2 ? 'm³' : '' }}</span
                                    >
                                </div>
                                <div class="todayValue">
                                    <label>{{
                                        item.type == 1 ? '今日用电' : item.type == 2 ? '今日用水' : '&nbsp;&nbsp;&nbsp;状态'
                                    }}</label>
                                    <span
                                        >{{ item.type == 3 ? '' : item.todayValue
                                        }}{{ item.type == 3 ? (item.status == 1 ? '在线' : '离线') : item.type == 1 ? 'kWh' : 'm³' }}</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gjw-list-page">
                    <el-pagination
                        background
                        :layout="hasIsSizes ? 'prev, pager, next,total,sizes' : 'prev, pager, next,total'"
                        :total="count"
                        :page-size="size"
                        :current-page="current"
                        @current-change="pageChange"
                        :page-sizes="[20, 50, 100, 200, 500]"
                        @size-change="handleSizeChange"
                    >
                        >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {listData} from '@/mockData/monitorCenter.js'
export default {
    props: ['currentNodeName', 'data', 'listTreeData', 'type'],
    components: {},
    data() {
        return {
            hasIsSizes: true,
            count: listData.filter((t) => t.type == 3).length,
            size: 20,
            current: 1,
            listData: listData.filter((t) => t.type == 3)
        }
    },
    computed: {},
    created() {},
    methods: {
        getHeight() {
            return this.type == '1' ? 'calc(100vh - 355px)' : 'calc(100vh - 295px)'
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            // console.log(type)
            // this.currentPage = "top"
            // this.deviceType = 1
            this.$emit('currentClick', type)
        },
        /** 查看详情 */
        gotoDetail(item) {
            // if (item.type == 1) {
            //     this.currentPage = "elec"
            // }
            // if (item.type == 2) {
            //     this.currentPage = "water"
            // }

            this.$emit('gotoDetail', item)
        },
        getImg(type) {
            return type == 1
                ? require('@/assets/images/monitor/db.png')
                : type == 2
                ? require('@/assets/images/monitor/sb.png')
                : require('@/assets/images/data/wifiWhite.png')
        },
        getHeaderClass(level) {
            return level == 1 ? 'normal' : level == 2 ? 'lx' : 'gj'
        },
        getBottomClass(type, level) {
            if (type == 1 && level == 1) {
                return 'dbzc'
            } else if (type == 2 && level == 1) {
                return 'sbzc'
            } else {
                return 'yc'
            }
        },
        getLevelImg(level) {
            return level == 1
                ? require('@/assets/images/monitor/warn1.png')
                : level == 2
                ? require('@/assets/images/monitor/warn2.png')
                : require('@/assets/images/monitor/warn3.png')
        }
    }
}
</script>

<style scoped>
.custom-tree-node {
    width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.main {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin: 10px 0;
    position: relative;
}
.main .content {
    padding: 10px;
    background-color: #fff;
    display: flex;
}
.leftArrow {
    width: 300px !important;
}
.rightArrow {
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
.leftTable {
    max-width: calc(100% - 320px);
}
.rightTable {
    max-width: calc(100% - 0px);
}
.treeContent {
    margin-right: 0;
    height: calc(100vh - 125px);
    transition: transform 0.3s;
    width: 300px;
    border-right: 1px solid #eee;
    padding-right: 10px;
}
.treeMain {
    height: calc(100vh - 175px);
    overflow: auto;
    margin-top: 10px;
}
.rightContent {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin-left: 10px;
    flex: 1;
    text-align: left;
}
.listCount {
    height: 90px;
    border: 1px solid #eeeef0;
    position: relative;
    background-color: #f5f9fc;
    border-radius: 4px;
}
.listCountLeft {
    width: 50%;
    float: left;
}
.listCountRight {
    width: 50%;
    float: left;
}
.listLine {
    width: 2px;
    height: 45px;
    background-color: #eeeef0;
    position: absolute;
    top: 22px;
    left: 51%;
}
.leftItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 20px;
}

.leftItem img {
    width: 50px;
}
.leftItem div {
    display: inline-block;
    margin-left: 15px;
    line-height: 30px;
    text-align: left;
}

.leftItem div label {
    font-size: 16px;
    display: block;
}

.leftItem div span {
    font-size: 14px;
    color: #757e8b;
}

.leftItem div span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.rightItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 22px;
}
.rightItem .itemTop {
    font-size: 14px;
    line-height: 27px;
}
.rightItem .itemTop label {
    font-size: 12px;
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 8px;
    margin-right: 10px;
}
.green {
    background-color: #01b77a;
}
.gray {
    background-color: #707070;
}
.red {
    background-color: #e60000;
}
.orange {
    background-color: #ff9900;
}
.rightItem .itemBottom {
    margin-top: 3px;
}
.rightItem .itemBottom span {
    font-size: 14px;
    color: #757e8b;
}
.rightItem .itemBottom span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.selectValue {
    display: flex;
    height: 50px;
    background: #f7f8fc;
    margin-top: 15px;
    border-radius: 4px;
    line-height: 50px;
}
.selectValue .value {
    margin-left: 20px;
    font-size: 16px;
}
.selectValue .rightValue {
    flex: 1;
    text-align: right;
    margin-right: 20px;
}
.selectValue .rightValue span {
    font-size: 16px;
    color: #666;
}
.selectValue .rightValue span b {
    font-size: 16px;
    color: #333;
}
.selectValue .rightValue span label {
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    margin-left: 40px;
    margin-right: 5px;
}
.roomContent {
    height: calc(100vh - 230px);
    overflow-y: auto;
}
.gjw-list {
    /* height: calc(100vh - 168px); */
    background: #fff;
    margin-top: 10px;
    /* padding: 10px; */
}
.gjw-list .gjw-list-list {
    height: calc(100vh - 355px);
    overflow-y: auto;
    padding-top: 0px;
}
.gjw-list .gjw-list-list .gjw-list-item {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-top: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
    margin-right: 10px;
    width: calc((100% - 60px) / 6);
    height: 100px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
    position: relative;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    background-color: #55cca4;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    overflow: hidden;
}
.gjw-list .gjw-list-list .gjw-list-item .item .db {
    background-color: #55cca4;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sb {
    background-color: #6caae5;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
    float: left;
    margin: 10px 6px 0 10px;
    width: 16px;
    height: 16px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
    font-size: 14px;
    float: left;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
    float: right;
    height: 35px;
    text-align: right;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
    float: right;
    margin-right: -10px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
    font-size: 12px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
    float: right;
    width: 10px;
    margin-right: 24px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 8px;
    float: right;
    margin-right: 10px;
    margin-top: 14px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
    background-color: #00ffa9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
    background-color: #77dbb9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
    background-color: #00ffa9;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
    background-color: #e2f7f0;
    height: 65px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
    background-color: #e2f7f0 !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
    background-color: #e9f6fe !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .yc {
    background-color: #f4f4f4 !important;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
    font-size: 14px;
    color: #666;
    padding-top: 13px;
    padding-bottom: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
    font-size: 14px;
    color: #666;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-page {
    height: 40px;
    padding-top: 10px;
    text-align: right;
}
.cursor {
    cursor: pointer;
}
</style>
